<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width,minimum-scale=1,maximum-scale=1,user-scalable=no">
	<title>商品详情主页</title>
	<link rel="stylesheet" type="text/css" href="../css/iconfont.css">
	<link rel="stylesheet" type="text/css" href="../css/goods_details.css">
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.2/css/swiper.min.css">
	<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.2/js/swiper.min.js"></script>
	<script type="text/javascript" src="../js/rem2.js"></script>
</head>
<body>
	<div class="wrap">
		<!-- 头部 -->
		<div class="header">
			<label class="header_left"><img src="../img/w_nav_back.png"></label>
			<ul class="nav">
				<li><a href="goods_details.html">商品</a></li>
				<li><a href="goods_details_tuwen.html">详情</a></li>
				<li><a href="goods_details_pingjia.html">评价</a></li>
				<li><a href="javascript:void(0)">推广</a></li>
			</ul>
		</div>
		<!-- 头部 -->
		<div class="content">
			<!-- 轮播图 -->
			<div class="lunbo">
				<div class="swiper-container">
					<div class="swiper-wrapper">
						<div class="swiper-slide"><img src="../img/seckill290x290_2.jpg"></div>
						<div class="swiper-slide"><img src="../img/seckill290x290_2.jpg"></div>
						<div class="swiper-slide"><img src="../img/seckill290x290_2.jpg"></div>
					</div>
					<div class="swiper-pagination"></div>
				</div>
			</div>
			<!-- 轮播图 -->
			<div class="item">
				<div class="title">
					<h2>澳洲  Swisse护肝片奶蓟草解酒片护肝宝改善脂肪肝保健品120粒/瓶</h2>
					<label><i class="iconfont icon-ic_chevron_right_px"></i></label>
				</div>
				<div class="pirce">
					<p class="lirun">利润<span class="red">￥42.00~￥74.20</span></p>
					<p class="chengben">成本<span>￥299.00</span></p>
				</div>
				<div class="size">
					<p>规格<span>原味 120粒/瓶 1瓶</span><i class="iconfont icon-ic_chevron_right_px"></i></p>
				</div>
				<div class="shengyu">
					<p>剩余<span>2901</span></p>
				</div>
				<div class="yunfei">
					<p>运费<span>￥0.00~￥25.00</span><span class="sell">76152人正在分销</span></p>
				</div>
			</div>
			<div class="shop">
				<div class="shopheader">
					<div class="header_left">
						<img src="../img/logo120x120.jpg">
					</div>
					<div class="header_cen">
						<h5 class="name">elkos官方旗舰店</h5>
						<p>汇聚全球100%海外正品</p>
					</div>
					<div class="header_right">
						 <span class="focu_btn">关注</span>
						 <i class="iconfont icon-ic_chevron_right_px"></i>
					</div>
				</div>
				<div class="shopcen">
					<ul>
						<li>
							<p class="all">1790</p>
							<p>全部商品</p>
						</li>
						<li>
							<p class="sellNum">119.5万</p>
							<p>分销商</p>
						</li>
						<li>
							<p>企业认证<span><img src="../img/ico_certified.png"></span></p>
							<p>担保交易<span><img src="../img/ico_certified.png"></span></p>
						</li>
					</ul>
				</div>
				<div class="shopbot">
					<span class="callkefu">联系客服</span>
					<span class="joinshop">进店逛逛</span>
				</div>
			</div>
			<div class="tuwen">
				<i class="iconfont icon-arrow-up"></i>上拉查看图文详情
			</div>
		</div>
		<div class="bottom">
			<ul>
				<li><img src="../img/ico_kefu2.png"><p>客服</p></li>
				<li><img src="../img/ico_shop.png"><p>店铺</p></li>
				<li class="guanzhu"><img src="../img/ico_follow.png"><p>关注</p></li>
				<li>上架到店铺</li>
				<li class="zijimai">自己买</li>
			</ul>
		</div>
		<div class="toTop">
			<img src="../img/top.png">
		</div>
		<div class="buy">
			<div class="buy_content">
				<div class="buy_head">
					<div class="img">
						<img src="../img/seckill290x290_2.jpg">
					</div>
					<div class="name">
						<p class="p1">澳洲Swisse护肝片奶蓟草解酒片护肝宝改善脂肪肝保健品120粒/瓶</p>
						<p class="p2">￥299.00</p>
						<p class="p3">商品编号:1950235214</p>
					</div>
				</div>
				<div class="buy_guige">
					<span>规格</span>
					<div class="buy_size">
						<p>深海鱼油软胶囊高含量130粒</p>
						<p>益生菌120粒</p>
						<p>维他命D3 300粒</p>
						<p>樱桃维生素B12防贫血250粒</p>
					</div>
					<span>数量</span>
					<div class="buy_num">
						<span class="jian">-</span>
						<span class="num">1</span>
						<span class="jia">+</span>
					</div>
				</div>
				<div class="buy_btn">
					<span class="buybtn">立即购买</span>
					<span class="car">加入购物车</span>
				</div>
			</div>
		</div>
		<div class="mask_s">
			<div class="ms_content">
				<i class="iconfont icon-smile"></i>
				<p>已加入购物车</p>
			</div>
		</div>
	</div>

</body>
<script type="text/javascript">
	var mySwiper = new Swiper('.swiper-container', {
		autoplay: {
			disableOnInteraction: false,
		}, 
		loop : true,
		pagination: {
			el: '.swiper-pagination',
		},
	})
</script>
<script type="text/javascript">
	var focu_btn=document.querySelector(".focu_btn");
	var guanzhu=document.querySelector(".guanzhu");
	var a = true;
	var toTop = document.querySelector(".toTop");
	var size = document.querySelector(".size");
	var iconJoin = document.querySelectorAll(".icon-ic_chevron_right_px");
	var joinShop = document.querySelector(".joinshop");
	var tuwen = document.querySelector(".tuwen");
	var header_left = document.querySelector(".header_left");
	var zijimai = document.querySelector(".zijimai");
	var buy = document.querySelector(".buy");
	zijimai.addEventListener("click",function(){
		buy.style.display="block"
	})
	var add = document.querySelector(".jia");
	var jian = document.querySelector(".jian");
	var car = document.querySelector(".car");
	add.addEventListener("click",function(){
		let num = document.querySelector(".num");
		num.innerText++
		// console.log(num.innerText)
	})
	jian.addEventListener("click",function(){
		let num = document.querySelector(".num");
		if(num.innerText>0){
			num.innerText--;
		}
	})
	car.addEventListener("click",function(){
		let mask_s = document.querySelector(".mask_s");
		buy.style.display="none";
		mask_s.style.display="block";
		let timer = setTimeout(function(){
			mask_s.style.display="none"
		},1000)
	})
	toTop.addEventListener("click",function(){
		var time=setTimeout(function(){
			document.documentElement.scrollTop=0
		},10)
	})
	guanzhu.addEventListener("click",function(){
		console.log(guanzhu.firstElementChild)
		if(a){
			guanzhu.innerHTML = "<img src='../img/ico_follow1.png'><p>已关注</p>"
			return a=false
		}else{
			guanzhu.innerHTML = "<img src='../img/ico_follow.png'><p>关注</p>"
			return a=true
		}
		
	})
	focu_btn.addEventListener("click",function(){
		if(focu_btn.innerText == "已关注"){
			focu_btn.innerText = "关注"
		}else{
			focu_btn.innerText = "已关注"
		}
	})
	size.addEventListener("click",function(){
		location.href="goods_details_size.html"
	})
	iconJoin[2].addEventListener("click",function(){
		location.href="supplierShop.html"
	})
	joinShop.addEventListener("click",function(){
		location.href="supplierShop.html"
	})
	tuwen.addEventListener("click",function(){
		location.href="goods_details_tuwen.html"
	})
	header_left.addEventListener("click",function(){
		location.href="supplierShop.html"
	})
</script>
</html>